<template>
	<view class="content">
		<view class="order-tab">
			<view :class=" ['tab-item',CategoryID == item.type?'on':'']" @click="typeclick"
				v-for="(item,index) in navbar" :key="index" :data-type='item.type'>{{item.name}}</view>
		</view>

		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="top-par">
					<view class="num">
						订单编号：{{item.sn}}
					</view>
					<view class="tag">
						{{item.status}}
					</view>
				</view>

				<view class="mid-par">
					<view class="o-list">
						<view class="o-item" v-for="(oitem,oindex) in item.orderItems" :key="oindex">

							<view class="img"
								:style="{background:oitem.thumbnail?('url('+baseUrl+ oitem.thumbnail +') center no-repeat'):'',backgroundSize:'cover'}">

							</view>
							<view class="int">
								<view class="t1">
									{{oitem.name}}
								</view>
								<view class="t2">
									重量：{{oitem.weight}}G
								</view>
								<view class="t3">
									¥ {{oitem.price}}
								</view>
							</view>
							<view class="cp-num">
								x {{oitem.quantity}}
							</view>
						</view>

						<view class="pay-num">
							需付款: ¥ {{item.amount}}
						</view>

					</view>
				</view>

				<view class="order-btn">
					<navigator class="btn" :url="'/pages/order/detail?sn=' + item.sn">订单详情</navigator>
					<view class="btn" @click="cancelOrder(item.sn)" v-if="item.status=='待发货'||item.status=='待付款'">取消订单</view>
					<view class="btn pay" @click="goBuy(item.sn)" v-if="item.status=='待付款'&& item.leftTime!='00:00'">付款{{item.leftTime||''}}</view>
					<navigator class="btn" :url="'/pages/order/detail?sn=' + item.sn + '&id=' + item.id" v-if="item.status=='待收货'">查看物流</navigator>
					<view class="btn" @click="orderRec(item.sn)" v-if="item.status=='待收货'">确认收货</view>
					<navigator class="btn" :url="'/pages/order/after?id=' + item.sn" v-if="!item.isAftersales && (item.status=='已完成' || item.status=='待收货' || item.status=='已收货')">申请售后</navigator>
				</view>

			</view>


		</view>
		
		

	</view>
</template>

<script>
	import {
		countDownFun, countDownFun1
	} from '@/common/time.js';
	import {
		orderList, orderCancel, orderReceive
	} from '@/api/order.js';
	import {
		reviewList, reviewedList
	} from '@/api/user.js'
	export default {
		data() {
			return {
				baseUrl: this.$baseUrl,
				CategoryID: '',
				img: '../../static/images/cp10.png',
				navbar: [{
					type: '',
					name: '全部'
				}, {
					type: 'PENDING_PAYMENT',
					name: '待付款'
				}, {
					type: 'PENDING_SHIPMENT',
					name: '待发货'
				}, {
					type: 'SHIPPED',
					name: '待收货'
				}, {
					type: 'COMPLETED',
					name: '已完成'
				}],
				list: [],
				page: 1
				// 订单状态（null 全部，PENDING_PAYMENT 代付款，PENDING_SHIPMENT 代发货，SHIPPED 待收货，COMPLETED 已完成)
			};
		},
		onReachBottom() {
			this.page++
			uni.showLoading({
				title: '加载中...'
			})
			setTimeout(() => {
				this.init(this.CategoryID)
			}, 800)
		},
		onLoad(option) {
			this.CategoryID = option.type
			this.init(this.CategoryID)
		},
		methods: {
			typeclick(e) {
				this.page = 1
				this.list = []
				var id = e.currentTarget.dataset.type
				this.CategoryID = id
				this.init(this.CategoryID)
			},
			init(e) {
				orderList({
					status: e,
					pageNumber: this.page
				}).then(res => {
					res.data.page.forEach(r => {
						this.list.push(r)
					})
					
					
					// var timearr = []
					this.list.forEach((i, index) => {
						if (i.status == "PENDING_PAYMENT") {
							this.list[index].status = '待付款'
						}
						if (i.status == 'PENDING_REVIEW') {
							this.list[index].status = '待审核'
						}
						if (i.status == 'PENDING_SHIPMENT') {
							this.list[index].status = '待发货'
						}
						if (i.status == 'SHIPPED') {
							this.list[index].status = '待收货'
						}
						if (i.status == "COMPLETED") {
							this.list[index].status = '已完成'
						}
						if (i.status == "RECEIVED") {
							this.list[index].status = '已收货'
						}
						if (i.status == 'CANCELED') {
							this.list[index].status = '已取消'
						}
						// let time = new Date().getTime(i.createdDate) + 1800000
						// i.leftTime = time
						if(i.status == '待付款') {
							this.countDown(index)
						}
					})
					// this.timer(this.list);
					
					uni.hideLoading()
				})
			},
			countDown(index) {
				let that = this
				this.list[index].leftTime = '00:00'
				if(this.list[index].timer) {
					clearInterval(this.list[index].timer)
				}
				console.log(this.list[index].leftTime)
				this.list[index].timer = setInterval(() => {
					if(that.list[index] && that.list[index].createdDate) {
						if(!countDownFun1(that.list[index].createdDate)) {
							clearInterval(that.list[index].timer)
							that.list[index].leftTime = '00:00'
							return
						} else {
							that.list[index].leftTime = countDownFun1(that.list[index].createdDate)
							that.$forceUpdate()
						}
					}
				}, 1000)
			},
			goBuy(sn) {
				uni.navigateTo({
					url: `/pages/pay/order-pay?sn=${sn}`
				})
			},
			cancelOrder(orderSn) {
				orderCancel({orderSn}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.page = 1
					this.list = []
					this.init(this.CategoryID)
				})
			},
			orderRec(orderSn) {
				orderReceive({orderSn}).then(res => {
					uni.showToast({
						title: res.message,
						icon: 'none'
					})
					this.page = 1
					this.list = []
					this.init(this.CategoryID)
				})
			},
			// 倒计时
			timer(times) {
				let that = this;

				setInterval(() => {
					times.forEach((item, index) => {
						//关键点 
						item.leftTime--;
						that.$set(item, 'currentTime', countDownFun(item.leftTime));
					});
				}, 1000);
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.order-tab {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;

		.tab-item {
			position: relative;
			padding: 35rpx 0;
			font-size: 24rpx;
		}

		.tab-item.on::before {
			position: absolute;
			content: '';
			width: 100%;
			height: 5rpx;
			bottom: 0;
			background-color: #b81c22;
		}
	}

	.list {
		.item {
			background-color: #fff;
			padding: 30rpx;
			margin-bottom: 30rpx;

			.top-par {
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 24rpx;
				margin-bottom: 30rpx;

				.num {
					color: #595757;
				}

				.tag {
					color: #b81c22;
				}
			}

			.mid-par {
				.o-list {
					.o-item {
						display: flex;
						align-items: center;
						justify-content: space-between;
						margin-bottom: 30rpx;

						.img {
							width: 160rpx;
							height: 160rpx;
						}

						.int {
							flex: 1;
							padding: 0 30rpx;

							.t1 {
								font-size: 24rpx;
								color: #1a1a1a;
								margin-bottom: 20rpx;
							}

							.t2 {
								font-size: 28rpx;
								color: #898989;
								margin-bottom: 45rpx;
							}

							.t3 {
								color: #898989;
								font-size: 28rpx;
							}
						}

						.cp-num {
							font-size: 28rpx;
							color: #898989;
						}
					}

					.pay-num {
						text-align: right;
						color: #1a1a1a;
						font-size: 24rpx;
						padding-bottom: 30rpx;
						border-bottom: 1px solid #f0f0f0;
					}
				}
			}

			.order-btn {
				margin-top: 30rpx;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.btn {
					width: 180rpx;
					height: 60rpx;
					line-height: 57rpx;
					text-align: center;
					background-color: #ffffff;
					border: solid 1px #000000;
					margin-left: 15rpx;
					font-size: 24rpx;
					color: #1b1b1b;
					letter-spacing: 3rpx;
				}
				
				.btn.pay {
					color: #b81c22;
					border: solid 1px #b81c22;
				}
			}


		}
	}
</style>
